<template>
  <el-container
    class="layout-container"
    @click="menuFlag = false"
    @contextmenu.prevent="menuFlag = false"
  >
    <!-- 上面行，固定高度60px -->
    <el-row class="row-header">
      <el-col :span="5">
        <el-button type="primary" icon="Search" />
        <el-button type="primary" icon="Search" />
        <el-button type="primary" icon="Search" />
        <el-button type="primary" icon="Search"></el-button>
      </el-col>
      <el-col :span="14">
        <h2>空间空间-2</h2>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" icon="Search" />
        <el-button type="primary" icon="Search" />
        <el-button type="primary" icon="Search" />
        <el-button type="primary" icon="Search"></el-button>
      </el-col>
    </el-row>
    <!-- 下面行，占据剩余空间 -->
      <div class="row-content" >
      <div  class="col-content" v-resize style="margin-right:10px">
        <div class="brower-layer">
          <el-card
            body-class="server-list"
            class="column-left"
            @contextmenu.prevent="handleContextMenu"
          >
            <template #header>
              <div class="card-header">
                <span>浏览器</span>
              </div>
            </template>
            <el-row class="small-header">
              <span
                v-for="(item, index) in leftTool"
                :key="item.id"
                :class="[
                  'iconfont',
                  leftToolStatus == index ? item.icon + ' active' : item.icon,
                ]"
                @click="leftToolStatus = index"
              ></span>
            </el-row>
            <el-tree
              :data="data"
              :props="defaultProps"
              node-key="layerCode"
              default-expand-all
              backgroundColor="#000"
              @node-click="handleNodeClick"
              ref="treeol"
              @check-change="handleCheckChange"
              style="height: 100%"
            >
              <template #default="{ node, data }">
                <div class="ric">
                  <span :class="{ 'text-color-change': node.checked }">{{
                    data.label
                  }}</span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </div>
        <div class="basic-layer">
          <el-card body-class="server-list" class="column-left">
            <template #header>
              <div class="card-header">
                <span>图层</span>
              </div>
            </template>
            <el-row class="small-header">
              <span
                v-for="(item, index) in leftTool"
                :key="item.id"
                :class="[
                  'iconfont',
                  leftToolStatus == index ? item.icon + ' active' : item.icon,
                ]"
                @click="leftToolStatus = index"
              ></span>
            </el-row>
            <el-tree
              :data="data"
              :props="defaultProps"
              show-checkbox
              node-key="layerCode"
              default-expand-all
              backgroundColor="#000"
              @node-click="handleNodeClick"
              ref="treeol"
              @check-change="handleCheckChange"
              style="height: 100%"
            >
              <template #default="{ node, data }">
                <div class="ric">
                  <span :class="{ 'text-color-change': node.checked }">{{
                    data.label
                  }}</span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </div>
      </div>
      <div  class="pos-center">
        <el-row class="center-header" justify="center">
          <span
            v-for="(item, index) in leftTool"
            :key="item.id"
            :class="[
              'iconfont',
              leftToolStatus == index ? item.icon + ' active' : item.icon,
            ]"
            @click="leftToolStatus = index"
          ></span>
        </el-row>
        <div class=" center-content">
          <el-row class="map-layer">
            <el-col :span="24">
              <el-card
                class="column-left"
                @contextmenu.prevent="handleContextMenu"
              >
                <div ref="mapRef" id="map"></div>
              </el-card>
            </el-col>
          </el-row>
          <el-row class="feature-layer" v-if="tableStatus">
            <el-col :span="24">
              <el-card
                body-class="server-list"
                class="column-left"
                @contextmenu.prevent="handleContextMenu"
              >
                <template #header>
                  <div class="card-header table-header">
                    <div>
                      <span
                        v-for="(item, index) in leftTool"
                        :key="item.id"
                        :class="[
                          'iconfont',
                          leftToolStatus == index
                            ? item.icon + ' active'
                            : item.icon,
                        ]"
                        @click="leftToolStatus = index"
                      ></span>
                    </div>

                    <span
                      class="iconfont icon-error"
                      @click="closeTable"
                    ></span>
                  </div>
                </template>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%; height: calc(100% - 30px)"
                >
                  <el-table-column prop="date" label="Date" width="180" />
                  <el-table-column prop="name" label="Name" width="180" />
                  <el-table-column prop="address" label="Address" />
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="col-content" style="margin-left:10px">
        <el-row class="brower-layer">
          <el-card
            body-class="server-list"
            class="column-left"
            @contextmenu.prevent="handleContextMenu"
          >
            <template #header>
              <div class="card-header">
                <span>浏览器</span>
              </div>
            </template>
            <el-row class="small-header">
              <span
                v-for="(item, index) in leftTool"
                :key="item.id"
                :class="[
                  'iconfont',
                  leftToolStatus == index ? item.icon + ' active' : item.icon,
                ]"
                @click="leftToolStatus = index"
              ></span>
            </el-row>
            <el-tree
              :data="data"
              :props="defaultProps"
              node-key="layerCode"
              default-expand-all
              backgroundColor="#000"
              @node-click="handleNodeClick"
              ref="treeol"
              @check-change="handleCheckChange"
              style="height: 100%"
            >
              <template #default="{ node, data }">
                <div class="ric">
                  <span :class="{ 'text-color-change': node.checked }">{{
                    data.label
                  }}</span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </el-row>
        <el-row class="basic-layer">
          <el-card
            body-class="server-list"
            class="column-left"
            @contextmenu.prevent="handleContextMenu"
          >
            <template #header>
              <div class="card-header">
                <span>图层</span>
              </div>
            </template>
            <el-row class="small-header">
              <span
                v-for="(item, index) in leftTool"
                :key="item.id"
                :class="[
                  'iconfont',
                  leftToolStatus == index ? item.icon + ' active' : item.icon,
                ]"
                @click="leftToolStatus = index"
              ></span>
            </el-row>
            <el-tree
              :data="data"
              :props="defaultProps"
              show-checkbox
              node-key="layerCode"
              default-expand-all
              backgroundColor="#000"
              @node-click="handleNodeClick"
              ref="treeol"
              @check-change="handleCheckChange"
              style="height: 100%"
            >
              <template #default="{ node, data }">
                <div class="ric">
                  <span :class="{ 'text-color-change': node.checked }">{{
                    data.label
                  }}</span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </el-row>
      </div>
    </div>

        
  </el-container>
  <ContextMenu
    :menuItems="componentAMenuItems"
    v-show="menuFlag"
    ref="contextMenuRef"
  />
</template>

<script setup>
import { nextTick } from "vue";
import ContextMenu from "./common/ContextMenu.vue";
const mapRef = ref(null);
const menuFlag = ref(false);
//右键列表菜单
const componentAMenuItems = [
  { label: "组件 A 菜单项 1" },
  { label: "组件 A 菜单项 2" },
  { label: "组件 A 菜单项 1" },
  { label: "组件 A 菜单项 2" },
  { label: "组件 A 菜单项 1" },
  { label: "组件 A 菜单项 2" },
];

//左侧工具栏状态
const leftToolStatus = ref(-1);
//左侧工具栏
const leftTool = [
  {
    id: 1,
    icon: "icon-add-circle-copy",
  },
  {
    id: 2,
    icon: "icon-arrow-up-circle",
  },
];

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
//左侧树数据
const data = ref([
  {
    label: "默认 one 1",
    children: [
      {
        label: "默认 two 1-1",
        children: [
          {
            label: "默认 three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 2",
    children: [
      {
        label: "默认 two 2-1",
        children: [
          {
            label: "默认 three 2-1-1",
          },
        ],
      },
      {
        label: "默认 two 2-2",
        children: [
          {
            label: "默认 three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 3",
    children: [
      {
        label: "默认 two 3-1",
        children: [
          {
            label: "默认 three 3-1-1",
          },
        ],
      },
      {
        label: "默认 two 3-2",
        children: [
          {
            label: "默认 three 3-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 3",
    children: [
      {
        label: "默认 two 3-1",
        children: [
          {
            label: "默认 three 3-1-1",
          },
        ],
      },
      {
        label: "默认 two 3-2",
        children: [
          {
            label: "默认 three 3-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 3",
    children: [
      {
        label: "默认 two 3-1",
        children: [
          {
            label: "默认 three 3-1-1",
          },
        ],
      },
      {
        label: "默认 two 3-2",
        children: [
          {
            label: "默认 three 3-2-1",
          },
        ],
      },
    ],
  },
]);
const defaultProps = {
  children: "children",
  label: "label",
};


const tableStatus = ref(true);//控制表格显示和隐藏
//关闭表格
const closeTable = () => {
  tableStatus.value = false;
};

const contextMenuRef = ref(null);

//获取鼠标位置
const handleContextMenu = (event) => {
  // 阻止默认的右键菜单行为
  event.preventDefault();
  event.stopPropagation();

  // 获取右键菜单组件实例并设置其显示位置为鼠标点击位置
  const context = contextMenuRef.value;
  menuFlag.value = true;
  let x = event.clientX;
  let y = event.clientY;

  // 获取页面可视区域的宽度和高度
  const pageWidth = document.documentElement.clientWidth;
  const pageHeight = document.documentElement.clientHeight;
  nextTick(() => {
    // 获取右键菜单自身的宽度和高度（这里假设右键菜单已经渲染完成，可以获取到准确的尺寸）
    const menuWidth = context.$el.offsetWidth;
    const menuHeight = context.$el.offsetHeight;
    // 判断右键菜单是否超出页面右侧边界，如果超出则将其左侧位置调整为边界内
    if (x + menuWidth > pageWidth) {
      x = pageWidth - menuWidth;
    }

    // 判断右键菜单是否超出页面底部边界，如果超出则将其顶部位置往上调整
    if (y + menuHeight > pageHeight) {
      y = Math.max(0, y - menuHeight);
    }

    context.$el.style.left = x + "px";
    context.$el.style.top = y + "px";
  });
};
onMounted(() => {
  const iconfontLink = document.createElement("link");
  iconfontLink.rel = "stylesheet";
  iconfontLink.href = "//at.alicdn.com/t/c/font_4761705_12rdk3n7vcu.css";
  document.head.appendChild(iconfontLink);
});


</script>

<style lang="scss" scoped>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
// @font-face {
//   font-family: 'iconfont';  /* Project id 4761705 */
//   src: url('//at.alicdn.com/t/c/font_4761705_l574e0mjg8.css') format('woff2'),
//        url('//at.alicdn.com/t/c/font_4761705_l574e0mjg8.woff?t=1732689554462') format('woff'),
//        url('//at.alicdn.com/t/c/font_4761705_l574e0mjg8.ttf?t=1732689554462') format('truetype');
// }
.iconfont {
  width: 24px;
  height: 24px;
  font-size: 24px;
  cursor: pointer;
}
.active {
  color: #21a3f1;
}
h2 {
  padding: 0;
  margin: 0;
}
.center-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.icon-error:hover {
  color: #21a3f1;
  transform: rotate(360deg);
  transition: all 1s linear;
}
.row-header {
  height: 50px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  h2 {
    text-align: center;
  }
}
.pos-center {
  position: relative;
  flex: 1;
}
.row-content {
  display: flex;
  flex: 1;
  margin: 0 !important;
  background-color: #f0f0f0;
  padding: 10px 0px 0 0;
  box-sizing: border-box;
  height: calc(100% - 50px);
}
.layout-container {
  height: 100vh;
  flex-direction: column;
}
.col-content {
  width: calc(20% - 10px);
  height: 100%;
}
.brower-layer {
  height: 60%;
}
.column-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.basic-layer {
  height: calc(40% - 10px);
  width: 100%;
  margin-top: 10px;
}
.server-list {
  height: calc(100% - 50px);
  flex: 1;
  overflow: auto;
}
:deep(.el-card__header) {
  padding: 5px !important;
  max-height: 30px !important;
  min-height: 30px !important;
}
:deep(.el-card__body) {
  height: calc(100% - 50px);
  flex: 1;
  overflow: auto;
  padding: 5px 10px 10px 10px !important;
}
#map {
  height: 100%;
}
.map-layer {
  // height: 70%;
  flex: 1;
}
.feature-layer {
  height: calc(30% - 10px);
  margin-top: 10px;
  :deep(.el-card__header) {
    padding: 2px 10px 0px 10px !important;
  }
  :deep(.el-card__body) {
    padding: 0 !important;
  }
}
.center-header {
  width: calc(100% - 40px);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9;
  height: 40px;
  border: 1px solid #bababaa6;
  border-radius: 4px;
  align-items: center;
  margin-left: 10px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
.small-header {
  height: 30px;
  align-items: center;
  overflow: hidden;
  :deep(.el-button.is-circle) {
    width: 25px;
    height: 25px;
  }
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>